<template>
  <div
  class="flex h-screen p-5 overflow-hidden bg-center bg-cover"
      v-if="data"
  >



    <!-- 左 -->
    <div class="flex flex-col flex-1 p-3 mr-5 bg-opacity-50 bg-slate-800">
      <!-- 横向柱状图 -->
      <!-- <HorizontalBar class="box-border pb-4 h-1/2" :data="data.regionData"></HorizontalBar> -->
      <!-- 雷达图 -->
      <!-- <RadarBar class="box-border pb-4 h-1/2" :data="data.riskData"></RadarBar> -->
      <!-- 数据传递关系图 -->
      <!-- <Relation class="h-1/2" :data="data.relationData"></Relation> -->
    </div>





    <!-- 中 -->
    <div class="flex flex-col w-1/2 mr-5">
      <!-- 数据总览 -->
      <TotalData class="p-3 bg-opacity-50 bg-slate-800" :data="data.totalData"></TotalData>
      <!-- 地图可视化 -->
      <MapChart
          class="flex-1 p-3 mt-4 bg-opacity-50 bg bg-slate-800"
          :data="data.mapData"
      ></MapChart>
    </div>





    <!-- 右 -->
    <div class="flex flex-col flex-1 p-3 bg-opacity-50 bg-slate-800">
      <!-- 竖向柱状图 -->
      <VerticalBar class="box-border pb-4 h-1/2" :data="data.serverData"></VerticalBar>
      <!-- 环形图 -->
      <RingBar class="box-border pb-4 h-1/2" :data="data.abnormalData"></RingBar>
      <!-- 文档云图 -->
      <WordCloud class="h-1/2" :data="data.wordCloudData"></WordCloud>
    </div>




  </div>
</template>

<script setup>
import HorizontalBar from "./components/HorizontalBar.vue";
import RadarBar from "./components/RadarBar.vue";
import Relation from "./components/Relation.vue";
import TotalData from "./components/TotalData.vue";
import MapChart from "./components/MapChart.vue";
import VerticalBar from "./components/VerticalBar.vue";
import RingBar from "./components/RingBar.vue";
import WordCloud from "./components/WordCloud.vue";

import {getVisualization} from "./api/visualization";
import {ref} from "vue";

const data = ref();

const loadData = async () => {
  data.value = await getVisualization();
};

// 间隔三秒 动态获取数据
setInterval(() => {
  loadData();
}, 1000);
</script>

<style lang="scss" scoped>
* {
  color: white;
}
</style>
